/*
 * @Author: szx
 * @Date: 2022-05-03 14:18:11
 * @LastEditTime: 2022-05-03 16:18:57
 * @Description:
 * @FilePath: \learn\React学习\github搜索\src\components\Search\index.jsx
 */
import React, { Component } from 'react';
import axios from 'axios';
import './index.css';

export default class index extends Component {
    search = () => {
        const {
            keyWordElement: { value: keyWord }
        } = this;
        const { updateAppState } = this.props;
        updateAppState({ isFirst: false, isLoading: true });
        axios.get(`/api1/search/users?q=${keyWord}`).then(
            (response) => {
                updateAppState({ isLoading: false, users: response.data.items });
                console.log(`成功了`, response.data);
            },
            (reason) => {
                updateAppState({ isLoading: false, err: reason.message });
                console.log(`失败了${reason}`);
            }
        );
    };
    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">Search Github Users</h3>
                <div>
                    <input ref={(c) => (this.keyWordElement = c)} type="text" placeholder="enter the name you search" />
                    &nbsp;
                    <button onClick={this.search}>Search</button>
                </div>
            </section>
        );
    }
}
